<template>
  <div class="users">
    <el-form class="search" :model="search" label-position="top" inline>
      <el-form-item prop="phone" label="手机号" label-width="180">
        <el-input v-model="search.phone" />
      </el-form-item>
      <el-form-item prop="createTimeRange" label="注册日期">
        <el-date-picker
          v-model="search.createTimeRange"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitSearch">提交</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="items" style="width: 100%">
      <el-table-column prop="id" label="用户ID" width="180"> </el-table-column>
      <el-table-column prop="portrait" label="头像" width="180">
        <template slot-scope="scope">
          <el-avatar
            v-slot
            size="small"
            :src="scope.row.portrait || require('@/assets/avatar.png')"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="用户名"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="createTime" label="注册时间"> </el-table-column>
      <el-table-column prop="accountNonLocked" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            disabled
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="ENABLE"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="allocUserRole(scope.row.id)">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.cur"
      :page-sizes="page.sizes"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
    <dialog-alloc-role ref="dialogAllocRole" :userId="selectUserId" />
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import PromiseDialog from '@/components/PromiseDialog.vue'
import { getUserPages } from '@/services/user'
import dayjs from 'dayjs'
import { DatePicker } from 'element-ui'
import DialogAllocRole from './components/DialogAllocRole.vue'
import { ID } from '@/types'

// tsignore
// import avatar from '@/assets/avatar.png'
export default Vue.extend({
  name: 'UserIndex',
  components: {
    DialogAllocRole
  },
  data () {
    return {
      // defAvatar: avatar,
      selectUserId: '' as ID,
      search: {
        phone: '',
        createTimeRange: ['', '']
      },
      items: [],
      page: {
        sizes: [2, 5, 10],
        size: 20,
        cur: 1,
        total: 0
      },
      pickerOptions: [{
        text: '最近一周',
        onClick (picker: DatePicker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近一个月',
        onClick (picker: DatePicker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近三个月',
        onClick (picker: DatePicker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }]
    }
  },
  created () {
    this.loadItems()
  },
  methods: {
    async loadItems () {
      const { phone, createTimeRange: [startCreateTime, endCreateTime] } = this.search
      const { data } = await getUserPages({
        currentPage: this.page.cur,
        pageSize: this.page.size,
        phone,
        startCreateTime,
        endCreateTime
      })
      const items = data.data.records
      items.forEach((item: { createTime: string }) => {
        item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
      })
      this.items = items
      this.page.total = data.data.total
    },
    submitSearch () {
      this.handleCurrentChange(1)
    },
    handleSizeChange (size: number) {
      this.page.size = size
      this.loadItems()
    },
    handleCurrentChange (cur: number) {
      this.page.cur = cur
      this.loadItems()
    },
    allocUserRole (userId: ID) {
      this.selectUserId = userId
      return (this.$refs.dialogAllocRole as PromiseDialog).open()
    }
  }
})

/**
 * todo
 * 对照
 *  - 样式
 *  - 数据,组件使用
 */
</script>
<style lang="scss" scoped>
.users .search {
  display: flex;
  align-items: flex-end;

  ::v-deep .el-form-item__label {
    line-height: 1;
  }
}
</style>
